<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="文章列表" name="articleList">
      <el-card class="box-card" v-for="item of articleList" :key="item.id">
        <el-container>
          <el-header>
            <h2 style="color: orange;">{{ item.title }}</h2>
          </el-header>
          <el-main>{{ item.content }}</el-main>
          <el-footer>
            <div>发布时间：{{ item.createTime }}</div>
            <div class="articleBtn">
              <el-button type="warning" size="small" round @click="toUpdata(item)">修改</el-button>
              <el-button type="danger" size="small" round>删除</el-button>
            </div>
          </el-footer>
        </el-container>
      </el-card>
      <el-space v-if="pageInfo.count > 0">
        <div class="page" v-for="pageNum in pageInfo.pageCount" @click="toPage(pageNum)">
          <div :style="`color:${pageNum == pageInfo.page ? 'orange' : ''}`">{{ pageNum }}</div>
        </div>
        <div class="pagez">共 {{ pageInfo.pageCount }} 页</div>
      </el-space>
    </el-tab-pane>

    <el-tab-pane label="新增文章">
      <el-form :model="addarticleForm" label-position="left">
        <el-form-item>
          <label>标题</label>
          <el-input v-model="addarticleForm.title" size="large" placeholder="请输入标题" />
        </el-form-item>

        <el-form-item>
          <label>分类：</label>
          <el-select v-model="cateValue" placeholder="请选择分类:" size="large">
            <el-option v-for="item in cateOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <label>内容</label>
          <RichTextEditor v-model="addarticleForm.content" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" round @click="addArticle()">提交</el-button>
        </el-form-item>

      </el-form>
    </el-tab-pane>
    <el-tab-pane label="修改文章" name="updataArticle">
      <el-form :model="updataArticleForm" label-position="left">
        <el-form-item>
          <label>标题</label>
          <el-input v-model="updataArticleForm.title" size="large" placeholder="请输入标题" />
        </el-form-item>

        <el-form-item>
          <label>分类：</label>
          <el-select v-model="cateValue" placeholder="请选择分类:" size="large">
            <el-option v-for="item in cateOptions" :key="item.value" :label="item.label"
              :value="updataArticleForm.categoryId" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <label>内容</label>
          {{ updataArticleForm.content }}
          <RichTextEditor v-model="updataArticleForm.content" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" round @click="updataArticle()">提交</el-button>
        </el-form-item>

      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>
 
<script setup>
import { ref, inject, reactive, onMounted } from 'vue'
import { AdminStore } from '../../stores/manager'
import { useRouter, useRoute } from 'vue-router'
import RichTextEditor from '../../components/RichTextEditor.vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()
const adminStore = AdminStore()
const axios = inject('axios')

// 默认标签显示
const activeName = ref('articleList')

// 分类选项
const cateOptions = ref([])

onMounted(() => {
  // 获取分类数据
  getCateOptions()
  // 获取文章列表
  getArticleList()
})

const getCateOptions = async () => {
  const { data: res } = await axios.get('category/list')
  cateOptions.value = res.data.map((item) => {
    return {
      label: item.name,
      value: item.id
    }
  })
}

// 文章列表
const articleList = ref([])

// 分页
const pageInfo = reactive({
  page: 1,
  pageSize: 3,
  pageCount: 0,
  count: 0
})

const getArticleList = async () => {
  const { data: res } = await axios.get('article/serch', {
    params: {
      page: pageInfo.page,
      pageSize: pageInfo.pageSize
    }
  })

  res.data.rows.forEach(item => {
    // 日期处理
    let date = new Date(item.createTime)
    item.createTime = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    // 截取字符
    if (item.content.length > 160) {
      item.content = item.content.substring(0, 160) + '......'
    }
  });

  articleList.value = res.data.rows

  pageInfo.count = res.data.count
  pageInfo.pageCount = Math.ceil(pageInfo.count / pageInfo.pageSize)
}

// 跳转页
const toPage = async (pageNum) => {
  pageInfo.page = pageNum
  getArticleList()
}

// 选择的分类
const cateValue = ref('')

// 新增文章
const addarticleForm = reactive({
  title: '',
  content: '',
  categoryId: 1
})

// 修改文章
const updataArticleForm = reactive({
  id: 0,
  title: '',
  content: '',
  categoryId: 1,
  createTime: ''
})

const toUpdata = async (data) => {
  activeName.value = 'updataArticle'
  const { data: res } = await axios.get('article/detail', { params: { id: data.id } })
  if (res.status.code !== 200) return ElMessage.error('查询失败')

  updataArticleForm.id = data.id
  updataArticleForm.title = res.data[0].title
  updataArticleForm.content = res.data[0].content
  updataArticleForm.categoryId = res.data[0].categoryId
  updataArticleForm.createTime = res.data[0].createTime
  console.log(updataArticleForm.content)

}

// 提交
const addArticle = async () => {
  //http://localhost:8080/article/add
  const { data: res } = await axios.post('article/_token/add', addarticleForm)
  if (res.status.code !== 200) {
    ElMessage.error('添加失败!')
    console.log('res', res)
    console.log('data', addarticleForm)
    return
  }

  ElMessage.success('添加成功！')
}

</script>
 
<style lang='less' scoped>
.box-card {
  width: 96%;
  margin-bottom: 10px;
}

.articleBtn {
  margin-top: 10px;
}

.el-space {
  background-color: white;
  padding: 6px;
  border-radius: 10px;

  .page {
    cursor: pointer
  }
}
</style>